<template>
  <div>
  <el-upload
      ref = "uploadRef"
      :action="uploadAddr"
      :data="uploadParm"
      :auto-upload="true"
      :show-file-list="false"
      :on-change="handleChange"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :before-upload="handleBeforeUpload"
      :on-progress="handleProgress"
  >

    <template #trigger>
      <el-button type="primary">选择上载文件</el-button>
    </template>

    <br/>
    <el-progress  v-if="progressVisible"  :percentage="progressValue"></el-progress>

  </el-upload>
</div>

</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { genFileId } from 'element-plus'
import  {  UploadRawFile } from 'element-plus'

export default {
  name: "ComptUploadFile",
  props:{ dirpath: String, basedir: String },
  emits:["resFilename"] ,

  computed: {
    
  },
  created() {
  },
  data(){
    return{
      uploadAddr : "/drawapi/drwfiles/upload",  //避免跨域的问题
      progressVisible: false ,
      progressValue: 0,
      filename: "",
      uploadParm: {  },
    }
  },
  methods:{
    handleChange( uploadFile, uploadFiles ){
    },
    handleExceed( files, uploadFiles ){
    },
    submitUpload(){
      this.$refs.uploadRef.submit( )
    },
    handleSuccess( response, uploadFile, uploadFiles ){
      ElMessage.success( '上传文件成功!' )
      this.$emit( "resFilename", uploadFile.name )
    },

    handleDelete( rowid ){
      this.md.splice(  rowid, 1 )
      this.$emit("update:modelValue",  this.md );
      console.log( "file numbers", this.md.length )
    },

    //上载的限制
    handleBeforeUpload( rawFile ){
      if( !this.dirpath ){
        ElMessage({ type: 'error',  message: "请选择创建的父目录!" })
        return false 
      }
      this.filename = rawFile.name
      // console.log( rawFile )
      this.uploadParm = { dirpath:  this.dirpath, basedir: this.basedir }
      console.log("before upload :", this.uploadParm )

      return true
    },

    handleProgress( evt, file, fileList ){
        // console.log( evt.percent )
      this.progressVisible = true
      this.progressValue = parseInt( evt.percent )
      if(  this.progressValue >= 100 ){
        this.progressValue = 100
        setTimeout( ()=> { this.progressVisible = false }, 1000 )
      }
    },

  },

}

</script>

<style scoped>

</style>

